<template>
    <section class="USInsurance-section">
        <app-header ref="header"></app-header>

        <!--banner图-->
        <div class="banner-box">
            <img v-lazy="'/static/img/US-insurance/banner.jpg'" title="海外保险" alt="海外保险"/>
            <article>
                <aside class="clearfix">
                    <p>华美优胜专家热线：<span>400-600-4982</span></p>
                    <a-button class="btn-danger btn-circle" type="danger" size="large" @click.stop="callMEIQIA">在线咨询</a-button>
                </aside>
                <div class="input-group">
                    <a-input-search v-model="bannerPhone" type="number" placeholder="请输入手机号码" @search="LeaveYourPhone">
                        <a-button type="primary" slot="enterButton">留下电话</a-button>
                    </a-input-search>
                </div>
            </article>
        </div>
        <!--中间内容-->
        <div class="content">
            <div class="container">
                <a-row :gutter="48" class="row">
                    <a-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" class="left-box">
                        <!-- 美国保险业的优势 -->
                        <a-row class="aside US-insurance-industry-advantage clearfix" :gutter="16">
                            <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" >
                                <div class="inside">
                                    <h1>美国保险业的优势</h1>
                                    <div class="txt">
                                        <p><i>♦</i> 历史悠久，监管严格，市场成熟</p>
                                        <p><i>♦</i> 美国人寿保险的税务优势</p>
                                        <p><i>♦</i> 美国人寿保险的税务优势</p>
                                        <p><i>♦</i> 人寿保险的传承属性；模型搭配的可接入性 – 与其它金融工具</p>
                                        <p><i>♦</i> 资金收益的杠杆和时间效能</p>
                                        <p><i>♦</i> 汇率及通货膨胀驱动</p>
                                    </div>
                                </div>
                            </a-col>
                            <a-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" >
                                <div class="inside">
                                    <h1>美国指数型万能寿险</h1>
                                    <div class="txt">
                                        <p><i>♦</i> 1997年，全美人寿推出第一款指数型万能寿险产品 Transdex500</p>
                                        <p><i>♦</i> 1999 年，美国有七家公司主要经营IUL产品，占据了1/3的的市场</p>
                                        <p><i>♦</i> 2006年，IUL产品销量突破352百万美元，相当于1999年销量的六倍</p>
                                        <p><i>♦</i> 2015年，IUL产品市场销售份额为17%（按保额计算), 34%（按保费计算)</p>
                                        <p><i>♦</i> 据LIMRA(人寿保险及市场调查协会)统计，在最近的经济衰退中，IUL产品的销售还是持续上涨</p>
                                        <p><i>♦</i> IUL产品作为有保底的主流险种，正获得越来越多美国投保人的选择</p>
                                    </div>
                                </div>
                            </a-col>
                        </a-row>

                        <!-- 产品选择 -->
                        <article class="Product-selection">
                            <img v-lazy="'/static/img/US-insurance/Product-selection-title.png'" title="海外保险" alt="海外保险"/>

                            <div class="Product-selection-main-content">
                                <article class="NotLoggedIn-box" v-show="!isLoggedIn">
                                    <img src="/static/img/NotLoggedIn-lock1.svg" title="海外保险" alt="海外保险">
                                    <p>更多信息请您 <a @click="cell_header_handleLoginModal">登录</a> 后查看</p>
                                </article>
                                <div class="inside" :class="{'Product-selection-main-content-NotLoggedIn': !isLoggedIn}">
                                    <!--楼层导航-->
                                    <a-anchor :offsetTop="150" class="anchor-box">
                                        <a-anchor-link :class="{'ant-anchor-link-active': cityAnchorLink}" href="#Voya-Life-insurance" title="Voya环球选择指数型万能寿险" />
                                        <a-anchor-link href="#AIG-Life-insurance" title="AIG 最大累积+指数型万能寿险" />
                                    </a-anchor>

                                    <!-- Voya环球选择指数型万能寿险 -->
                                    <div class="public-Life-insurance" id="Voya-Life-insurance">
                                        <h4>Voya环球选择指数型万能寿险介绍</h4>
                                        <a-row  class="clearfix img-txt" :gutter="32">
                                            <a-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
                                                <h4>Voya Financial, Inc. Voya 保险公司（纽交所代码：VOYA），是一家集退休规划、年金、投资管理、人寿保险及员工福利五大业务版块的综合性金融公司。</h4>
                                                <p><i>♦</i> 公司前身为具有百年历史的荷兰国际集团ING</p>
                                                <p><i>♦</i> 公司服务美国及世界1300万客户超过40年</p>
                                                <p><i>♦</i> 2015年公司收入110亿美金</p>
                                                <p><i>♦</i> 资产管理量4660亿美金</p>
                                                <p><i>♦</i> ING依然持有Voya股份</p>
                                            </a-col>
                                            <a-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10" class="figure">
                                                <img v-lazy="'/static/img/US-insurance/Voya-img1.jpg'" title="海外保险" alt="海外保险"/>
                                            </a-col>
                                        </a-row>

                                        <h4>投保客户要求</h4>
                                        <a-row class="clearfix img-txt" :gutter="8">
                                            <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
                                                <div class="title">非美国国籍</div>
                                            </a-col>
                                            <a-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18" class="figure">
                                                <img v-lazy="'/static/img/US-insurance/Voya-img2.jpg'" title="海外保险" alt="海外保险"/>
                                            </a-col>
                                        </a-row>
                                        <a-row class="clearfix img-txt" :gutter="8">
                                            <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
                                                <div class="title">美国国籍含</br>绿卡客户</div>
                                            </a-col>
                                            <a-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18" class="figure">
                                                <img v-lazy="'/static/img/US-insurance/Voya-img3.jpg'" title="海外保险" alt="海外保险"/>
                                            </a-col>
                                        </a-row>

                                        <h4>保单持有方式</h4>
                                        <a-row class="clearfix img-txt" :gutter="8">
                                            <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
                                                <div class="title">个人持有&nbsp;&nbsp;&nbsp;&nbsp;</div>
                                            </a-col>
                                            <a-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18" class="figure">
                                                <img v-lazy="'/static/img/US-insurance/Voya-img4.jpg'" title="海外保险" alt="海外保险"/>
                                            </a-col>
                                        </a-row>
                                        <a-row class="clearfix img-txt" :gutter="8">
                                            <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
                                                <div class="title">信托持有&nbsp;&nbsp;&nbsp;&nbsp;</div>
                                            </a-col>
                                            <a-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18" class="figure">
                                                <img v-lazy="'/static/img/US-insurance/Voya-img5.jpg'" title="海外保险" alt="海外保险"/>
                                            </a-col>
                                        </a-row>

                                        <h4>投保联系确认</h4>
                                        <a-row class="clearfix img-txt" :gutter="8">
                                            <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
                                                <div class="title">非美国国籍</div>
                                            </a-col>
                                            <a-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18" >
                                                <p><i>♦</i> 可为本人投保，可为成年直系亲属投保，有可能提供证明关系</p>
                                                <p><i>♦</i> （证明包括：出生证、户口本、结婚证等以及DNA证明）</p>
                                                <p><i>♦</i> 为子女或孙辈投保，孩子的保额受其父/母于美国购买保单保额较高者保额限制，20%~50%</p>
                                                <p><i>♦</i> 为商业合伙人投保</p>
                                            </a-col>
                                        </a-row>
                                        <a-row class="clearfix img-txt" :gutter="8">
                                            <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
                                                <div class="title">美国国籍含<br />绿卡客户</div>
                                            </a-col>
                                            <a-col  :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
                                                <p><i>♦</i> 可为本人投保；</p>
                                                <p><i>♦</i> 可为成年或未成年直系亲属投保，有可能提供证明关系</p>
                                                <p><i>♦</i> （证明包括：出生证、户口本、结婚证等以及DNA证明）</p>
                                                <p><i>♦</i> 未成年人投保额受其父/母于美国购买保单保额较高者保额限制，一般为20%~50% </p>
                                                <p><i>♦</i> 为商业合伙人投保</p>
                                            </a-col>
                                        </a-row>
                                        <h4>客户投保案例</h4>
                                        <div class="card-container">
                                            <a-tabs type="card" :tabBarGutter="0" size="large">
                                                <a-tab-pane tab="30岁女性" key="1">
                                                    <!--30岁女性-->
                                                    <div class="tab-pane fade in active" id="thirty-years-woman">
                                                        <h4>30岁女性，中国公民，不吸烟，最好的健康评级，预计增长率7.09%</h4>
                                                        <aside>
                                                            <h5>免税退休收入规划 - 100万保额+65岁至100岁每年提取21532美金</h5>
                                                            <p><i>♦</i> 每年支付<span class="red-color">16740美金</span>，分5年支付，共支付83700美金。</p>
                                                            <p><i>♦</i> 从第一年起客户的保额是<span class="red-color">100万美金</span>起。(即使客户在购保后第二天辞世，保险公司将赔付100万美金）</p>
                                                            <p><i>♦</i> 在客户65岁时，保额依然为100万美金，并开始提取每年免税收入<span class="red-color">21532美金</span>， 直至客户100岁， 共计提领约<span class="red-color">75.36万美金</span>。(提领的前提下，保额将相应减少）</p>
                                                            <p><i>♦</i> 在客户100岁时，在提领结束的前提下，保单保额依然有100万美金。</p>
                                                            <p><i>♦</i> 若不提领，以财富传承为目的，客户100岁时保额为<span class="red-color">422万美金</span>。</p>
                                                            <h4>若其它情况不变：</h4>
                                                            <p><i>♦</i> 若45岁提领：$4446 / 244530 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 若50岁提领：$6597 / 329850</p>
                                                            <p><i>♦</i> 若55岁提领：$9801 / 441045 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 若60岁提领：$14542 / 581680</p>
                                                        </aside>
                                                    </div>
                                                </a-tab-pane>
                                                <a-tab-pane tab="40岁男性" key="2">
                                                    <!--40岁男性-->
                                                    <div class="tab-pane fade" id="Forty-years-men">
                                                        <h4>40岁男性，中国公民，不吸烟，最好的健康评级，预计增长率7.09%</h4>
                                                        <aside>
                                                            <h5>免税退休收入规划 - 300万保额+65岁至100岁每年提取52009美金</h5>
                                                            <p><i>♦</i> 每年支付<span class="red-color">84780美金</span>，分5年支付，共支付423900美金。</p>
                                                            <p><i>♦</i> 从第一年起客户的保额是<span class="red-color">300万美金</span>起。(即使客户在购保后第二天辞世，保险公司将赔付300万美金）</p>
                                                            <p><i>♦</i> 在客户65岁时，保额依然为300万美金，并开始提取每年免税收入<span class="red-color">52009美金</span>，直至客户100岁，共计提领约<span class="red-color">182万美金</span>。(提领的前提下，保额将相应减少）</p>
                                                            <p><i>♦</i> 在客户100岁时，在提领结束的前提下，保单保额依然有300万美金</p>
                                                            <p><i>♦</i> 若不提领，以财富传承为目的，客户100岁时保额为<span class="red-color">1095.8万美金</span></p>
                                                            <h4>若其它情况不变：</h4>
                                                            <p><i>♦</i> 若50岁提领：$14830 / 741500 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 若55岁提领：$22596 / 1016820</p>
                                                            <p><i>♦</i> 若60岁提领：$34370 / 2062200</p>
                                                        </aside>
                                                    </div>
                                                </a-tab-pane>
                                                <a-tab-pane tab="40岁女性" key="3">
                                                    <!--40岁女性-->
                                                    <div class="tab-pane fade" id="Forty-years-woman">
                                                        <h4>40岁女性，中国公民，不吸烟，最好的健康评级，预计增长率7.09%</h4>
                                                        <aside>
                                                            <h5>免税退休收入规划 - 300万保额+65岁至100岁每年提取38928美金</h5>
                                                            <p><i>♦</i> 每年支付<span class="red-color">72000美金</span>，分5年支付，共支付360000美金</p>
                                                            <p><i>♦</i> 从第一年起客户的保额是<span class="red-color">300万美金</span>起。(即使客户在购保后第二天辞世，保险公司将赔付300万美金）</p>
                                                            <p><i>♦</i> 在客户65岁时，保额依然为300万美金，并开始提取每年免税收入<span class="red-color">38928美金</span>，直至客户100岁，共计提领约<span class="red-color">136万美金</span>。(提领的前提下，保额将相应减少）</p>
                                                            <p><i>♦</i> 在客户100岁时，在提领结束的前提下，保单保额依然有300万美金</p>
                                                            <p><i>♦</i> 若不提领，以财富传承为目的，客户100岁时保额为<span class="red-color">913.5万美金</span></p>
                                                            <h4>若其它情况不变：</h4>
                                                            <p><i>♦</i> 若50岁提领：$11099 / 554950 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 若55岁提领：$16790 / 755550</p>
                                                            <p><i>♦</i> 若60岁提领：$25549 / 1021960</p>
                                                        </aside>
                                                    </div>
                                                </a-tab-pane>
                                                <a-tab-pane tab="50岁男性" key="4">
                                                    <!--50岁男性-->
                                                    <div class="tab-pane fade" id="Fifty-years-men">
                                                        <h4>50岁男性，中国公民，不吸烟，最好的健康评级，预计增长率7.09%</h4>
                                                        <aside>
                                                            <h5>免税退休收入规划 - 500万保额+65岁至100岁每年提取64510美金</h5>
                                                            <p><i>♦</i> 每年支付<span class="red-color">220800美金</span>，分5年支付，共支付110.4万美金</p>
                                                            <p><i>♦</i> 从第一年起客户的保额是<span class="red-color">500万美金</span>起。(即使客户在购保后第二天辞世，保险公司将赔付500万美金）</p>
                                                            <p><i>♦</i> 在客户65岁时，保额依然为500万美金，并开始提取每年免税收入<span class="red-color">64510美金</span>，直至客户100岁，共计提领约<span class="red-color">225.78万美金</span>。(提领的前提下，保额将相应减少）</p>
                                                            <p><i>♦</i> 在客户100岁时，在提领结束的前提下，保单保额依然有500万美金</p>
                                                            <p><i>♦</i> 若不提领，以财富传承为目的，客户100岁时保额为<span class="red-color">1531.8万美金</span></p>
                                                        </aside>
                                                    </div>
                                                </a-tab-pane>
                                                <a-tab-pane tab="50岁女性" key="5">
                                                    <!--50岁女性-->
                                                    <div class="tab-pane fade" id="Fifty-years-woman">
                                                        <h4>50岁女性，中国公民，不吸烟，最好的健康评级，预计增长率7.09%</h4>
                                                        <aside>
                                                            <h5>免税退休收入规划 - 500万保额+65岁至100岁每年提取35570美金</h5>
                                                            <p><i>♦</i> 每年支付<span class="red-color">18万美金</span>，分5年支付，共支付90万美金</p>
                                                            <p><i>♦</i> 从第一年起客户的保额是<span class="red-color">500万美金</span>起。(即使客户在购保后第二天辞世，保险公司将赔付500万美金）</p>
                                                            <p><i>♦</i> 在客户65岁时，保额依然为500万美金，并开始提取每年免税收入<span class="red-color">35570美金</span>，直至客户100岁，共计提领约<span class="red-color">124.5万美金</span>。(提领的前提下，保额将相应减少）</p>
                                                            <p><i>♦</i> 在客户100岁时，在提领结束的前提下，保单保额依然有500万美金</p>
                                                            <p><i>♦</i> 若不提领，以财富传承为目的，客户100岁时保额为<span class="red-color">1125.3万美金</span></p>
                                                        </aside>
                                                    </div>
                                                </a-tab-pane>
                                            </a-tabs>
                                        </div>
                                        <h4>保单理赔</h4>
                                        <aside class="Insurance-claims">
                                            <h4>收到身故索赔的充分证明材料之后20天内支付身故保险金</h4>
                                            <p>身故索赔的充分证明材料指已经收到：</p>
                                            <div class="process clearfix">
                                                <p>被保险人身故的充分证明【医院或和派出所死亡证明】</p>
                                                <p>确定保险责任、责任范围和合法受益人身份的充分资料</p>
                                                <p>其它相关法律文件，如监护代管、信托、遗嘱等法律文书</p>
                                            </div>
                                            <p>实际操作中，受资料递交及翻译等因素影响，建议向客户说明一般需要约1个月的时间完成全部理赔操作：</p>
                                            <div class="process clearfix">
                                                <p>无论保单持有方式如何均需提供A + B</p>
                                                <p>个人持有，可直接提交至保险公司；信托持有，交至受托人代办</p>
                                                <p>均可指定任何国家的账户信托持有可以汇往指定受益人本人指定账户</p>
                                            </div>
                                            <a-button class="btn-danger btn-circle" type="danger" size="large" @click.stop="callMEIQIA" style="margin: 30px 0 0 0;"><i class="iconfont icon-duanxin"></i> 详细了解</a-button>
                                        </aside>
                                    </div>

                                    <!-- AIG 最大累积+指数型万能寿险 -->
                                    <div class="public-Life-insurance" id="AIG-Life-insurance">
                                        <h4>AIG 最大累积+指数型万能寿险</h4>
                                        <a-row  class="clearfix img-txt" :gutter="32">
                                            <a-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
                                                <h4>美国国际集团（英语：American International Group，AIG）是一家集个人保险与人寿、退休管理、财产保险、抵押贷款担保及员工福利的跨国保险及金融服务机构。</h4>
                                                <p><i>♦</i> 集团的业务遍布全球，在亚太地区和欧洲都设有总部</p>
                                                <p><i>♦</i> 2016年获得CIO100 Awards</p>
                                                <p><i>♦</i> 业务扩展到130个国家9千万客户</p>
                                                <p><i>♦</i> 在全世界2012年至2016年共斩获73个保险界有分量的奖项</p>
                                                <p><i>♦</i> 为98%的财富500强的公司提供保险服务</p>
                                            </a-col>
                                            <a-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10" class="figure">
                                                <img v-lazy="'/static/img/US-insurance/AIG-img1.jpg'" title="海外保险" alt="海外保险"/>
                                            </a-col>
                                        </a-row>
                                        <h4>投保客户要求</h4>
                                        <a-row class="clearfix img-txt" :gutter="8">
                                            <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
                                                <div class="title">非美国国籍</div>
                                            </a-col>
                                            <a-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18" class="figure">
                                                <img v-lazy="'/static/img/US-insurance/AIG-img2.jpg'" title="海外保险" alt="海外保险"/>
                                            </a-col>
                                        </a-row>
                                        <a-row class="clearfix img-txt" :gutter="8">
                                            <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
                                                <div class="title">美国国籍含</br>绿卡客户</div>
                                            </a-col>
                                            <a-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18" class="figure">
                                                <img v-lazy="'/static/img/US-insurance/AIG-img3.jpg'" title="海外保险" alt="海外保险"/>
                                            </a-col>
                                        </a-row>
                                        <h4>保单持有方式</h4>
                                        <a-row class="clearfix img-txt" :gutter="8">
                                            <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
                                                <div class="title">个人持有</div>
                                            </a-col>
                                            <a-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18" class="figure">
                                                <img v-lazy="'/static/img/US-insurance/AIG-img4.jpg'" title="海外保险" alt="海外保险"/>
                                            </a-col>
                                        </a-row>
                                        <a-row class="clearfix img-txt" :gutter="8">
                                            <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
                                                <div class="title">信托持有</div>
                                            </a-col>
                                            <a-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18" class="figure">
                                                <img v-lazy="'/static/img/US-insurance/AIG-img5.jpg'" title="海外保险" alt="海外保险"/>
                                            </a-col>
                                        </a-row>
                                        <h4>投保联系确认</h4>
                                        <a-row class="clearfix img-txt" :gutter="8">
                                            <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
                                                <div class="title">非美国国籍</div>
                                            </a-col>
                                            <a-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18" >
                                                <p><i>♦</i> 可为本人投保，可为成年直系亲属投保，有可能提供证明关系</p>
                                                <p><i>♦</i> （证明包括：出生证、户口本、结婚证等以及DNA证明）</p>
                                                <p><i>♦</i> 为子女或孙辈投保，孩子的保额受其父/母于美国购买保单保额较高者保额限制，20%~50%</p>
                                                <p><i>♦</i> 为商业合伙人投保</p>
                                            </a-col>
                                        </a-row>
                                        <a-row class="clearfix img-txt" :gutter="8">
                                            <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
                                                <div class="title">美国国籍含<br/>绿卡客户</div>
                                            </a-col>
                                            <a-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18" >
                                                <p><i>♦</i> 可为本人投保；</p>
                                                <p><i>♦</i> 可为成年或未成年直系亲属投保，有可能提供证明关系</p>
                                                <p><i>♦</i> （证明包括：出生证、户口本、结婚证等以及DNA证明）</p>
                                                <p><i>♦</i> 未成年人投保额受其父/母于美国购买保单保额较高者保额限制，一般为20%~50% </p>
                                                <p><i>♦</i> 为商业合伙人投保</p>
                                            </a-col>
                                        </a-row>
                                        <h4>保单理赔</h4>
                                        <aside class="Insurance-claims">
                                            <h4>收到身故索赔的充分证明材料之后20天内支付身故保险金</h4>
                                            <p>身故索赔的充分证明材料指已经收到：</p>
                                            <div class="process clearfix">
                                                <p>被保险人身故的充分证明【医院或和派出所死亡证明】</p>
                                                <p>确定保险责任、责任范围和合法受益人身份的充分资料</p>
                                                <p>其它相关法律文件，如监护代管、信托、遗嘱等法律文书</p>
                                            </div>
                                            <p>实际操作中，受资料递交及翻译等因素影响，建议向客户说明一般需要约1个月的时间完成全部理赔操作：</p>
                                            <div class="process clearfix">
                                                <p>无论保单持有方式如何均需提供A + B</p>
                                                <p>个人持有，可直接提交至保险公司；信托持有，交至受托人代办</p>
                                                <p>均可指定任何国家的账户信托持有可以汇往指定受益人本人指定账户</p>
                                            </div>
                                            <a-button class="btn-danger btn-circle" type="danger" size="large" @click.stop="callMEIQIA" style="margin: 30px 0 0 0;"><i class="iconfont icon-duanxin"></i> 详细了解</a-button>
                                        </aside>
                                    </div>
                                </div>
                            </div>
                        </article>

                    </a-col>
                    <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="right-box">
                        <!--购买保险意向-->
                        <div class="inside">
                            <h3><span>购买保险意向</span></h3>
                            <!--客户留言——留言类型，type：1.购房意向、2.移民、3.留学、4.保险、5.1秒变身海外业主-->
                            <clientMessage :messageType="4" :phone="userPhone"></clientMessage>
                        </div>
                    </a-col>
                </a-row>
            </div>
        </div>

        <!--房源推荐-->
        <recommendHouse></recommendHouse>
        <!--中美置业团队-->
        <consultantTeam></consultantTeam>

        <!--客户立即报名-->
        <clientMessageSignUp></clientMessageSignUp>

        <!--返回顶部-->
        <BackTop :isShowHouseContrast="false"></BackTop>
    </section>
</template>

<script>
    import Header from '../components/header.vue';//公共组件——头部
    import recommendHouse from '../components/recommendHouse.vue';//公共组件——房源推荐
    import consultantTeam from '../components/consultantTeam.vue';//公共组件——中美置业团队
    import BackTop from '../components/BackTop.vue';//公共组件——返回顶部
    import clientMessage from '../components/clientMessage.vue';//公共组件——客户立即报名底部吸底条
    import clientMessageSignUp from '../components/clientMessageSignUp.vue';//公共组件——客户立即报名底部吸底条

    export default {
        data() {
            return {
                isLoggedIn: false,//用户是否登录
                cityAnchorLink: true,//默认给楼层导航第一个链接active类名

                bannerPhone: '',//banner图里的留下手机号
                userPhone: '',//banner图里的留下手机号

            }
        },
        metaInfo () {
            return {
                title: '海外保险_华美优胜美国房地产投资公司',
                meta: [
                    { vmid: 'keywords', name: 'keywords', content: '海外保险_华美优胜美国房地产投资公司' },
                    { vmid: 'description', name: 'description', content: '海外保险_华美优胜美国房地产投资公司' },

                ],
            }
        },
        computed: {
        },
        created() {
        },
        mounted() {
            window.addEventListener('scroll', this.isScrollTop, false);
            //判断用户是否登录
            if(this.$store.getters.get_user.name != '' && this.$store.getters.get_user.headPhoto != ''){
                this.isLoggedIn = true;
            }else{
                this.isLoggedIn = false;
            }
        },
        //没有缓存的路由销毁时触发
        destroyed: function() {
            window.removeEventListener('scroll', this.isScrollTop, false);//离开的时候注销事件
        },
        //缓存路由退出时触发
        deactivated(){
            window.removeEventListener('scroll', this.isScrollTop, false);//离开的时候注销事件
        },
        methods: {
            //banner图里的留下电话
            LeaveYourPhone(){
                this.userPhone = this.bannerPhone;
            },
            //判断页面滚动条是否超过了楼层导航第二个链接
            isScrollTop(){
                if(document.documentElement.scrollTop > 4319){
                    this.cityAnchorLink = false;
                }else{
                    this.cityAnchorLink = true;
                }
            },
            //触发公共登录modal框
            cell_header_handleLoginModal(){
                this.$refs.header.$emit('header_handleLoginModal');
            },

        },
        components: {
            'app-header': Header,//公共组件——头部
            recommendHouse,//公共组件——房源推荐
            consultantTeam,//公共组件——中美置业团队
            BackTop,//公共组件——返回顶部
            clientMessage,//公共组件——客户留言
            clientMessageSignUp,//公共组件——客户立即报名底部吸底条
        }
    }
</script>

<style lang="less" type="text/less">
    body {
        background: #f2f2f2 !important;
        .USInsurance-section {
            .banner-box{
                width: 100%;
                position: relative;
                >img {
                    width: 100%;
                }
                >article{
                    position: absolute;
                    left: 10%;
                    bottom: 10px;
                    text-align: center;
                    padding: 10px 30px;
                    margin: 20px 0 0 0;
                    background: rgba(255, 255, 255, .3);
                    border: 2px solid #e1f1e5;
                    border-radius: 5px;
                    >aside{
                        line-height: 33px;
                        >p{
                            color: #adadad;
                            display: inline-block;
                            text-indent: 1em;
                            text-align: left;
                            float: left;
                            >span{
                                font-size: 15px;
                                color: #ff8650;
                            }
                        }
                    }
                    >.input-group{
                        margin: 20px 0 0 0;
                        width: 390px;
                        >input{
                            text-indent: 1em;
                        }
                    }
                }
            }
            .content {
                margin: 30px 0;
                > .container {
                    padding: 0;
                    > .row {
                        text-align: center;
                        padding: 0 0 0 30px;
                        /*左边主体内容*/
                        >.left-box{
                            padding: 0;
                            /* 美国保险业的优势 */
                            >.US-insurance-industry-advantage{
                                background: #fff;
                                padding: 15px 0;
                                >div{
                                    >.inside{
                                        border: 1px solid #135490;
                                        >h1{
                                            font-size: 16px;
                                            color: #fff;
                                            background: linear-gradient(to bottom, #135490, #11497c);
                                            background: -webkit-linear-gradient(to bottom, #135490, #11497c);
                                            padding: 14px 0;
                                        }
                                        >.txt{
                                            padding: 20px 10px;
                                            >p{
                                                color: #000;
                                                text-align: left;
                                                >i{
                                                    font-size: 18px;
                                                    color: #135490;
                                                }
                                            }
                                        }
                                    }
                                }
                            }

                            /* 产品选择 */
                            > .Product-selection {
                                > img {
                                    margin: 36px 0;
                                }
                                >.Product-selection-main-content {
                                    position: relative;
                                    display: table;
                                    > .NotLoggedIn-box {
                                        position: absolute;
                                        top: 0;
                                        left: 0;
                                        width: 100%;
                                        height: 100%;
                                        text-align: center;
                                        /*display: flex;*/
                                        /*display: -webkit-flex;*/
                                        /*align-items: center;*/
                                        /*justify-content: center;*/

                                        display: table-cell;
                                        vertical-align: middle;

                                        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #fff 60%);
                                        background-color: rgba(255, 255, 255, .7);
                                        z-index: 9;
                                        > img {
                                            display: inline-block;
                                            width: 120px;
                                            margin: 100px 0 0 0;
                                        }
                                        > p {
                                            display: block;
                                            font-size: 16px;
                                        }
                                    }
                                    >.inside {
                                        /*自定义楼层导航样式*/
                                        .anchor-box {
                                            > .ant-affix {
                                                width: 100% !important;
                                                top: 60px !important;
                                                left: 0px !important;
                                            }
                                            .ant-anchor-wrapper {
                                                font-size: 16px;
                                                padding: 0 100px;
                                                background: #414772;
                                                > .ant-anchor {
                                                    width: 100%;
                                                    display: -webkit-flex; /* Safari ,Webkit内核的浏览器，必须加上-webkit前缀。*/
                                                    display: flex;
                                                    text-align: center;
                                                    height: 56px;
                                                    line-height: 56px;
                                                    font-size: 16px;
                                                    padding: 0;
                                                    > .ant-anchor-ink:first-of-type {
                                                        display: none;
                                                    }
                                                    > .ant-anchor-link {
                                                        flex: 1;
                                                        float: left;
                                                        width: 12.5%;
                                                        padding: 0px;
                                                        line-height: 56px;
                                                        > a {
                                                            display: block;
                                                            width: 100%;
                                                            color: #fff;
                                                        }
                                                        > a:hover {
                                                            color: #fff;
                                                        }
                                                    }
                                                    > .ant-anchor-link-active {
                                                        background: #0c7cd5;
                                                        > a {
                                                            color: #fff;
                                                        }
                                                    }
                                                }
                                            }
                                        }

                                        /* Voya环球选择指数型万能寿险 */
                                        > .public-Life-insurance {
                                            background: #fff;
                                            text-align: center;
                                            padding: 0 50px 50px 50px;
                                            > h4 {
                                                display: inline-block;
                                                padding: 14px 20px;
                                                background: linear-gradient(to bottom, #ff8650, #eb743f);
                                                background: -webkit-linear-gradient(to bottom, #ff8650, #eb743f);
                                                font-size: 20px;
                                                color: #fff;
                                                margin: 40px 0;
                                                border-radius: 5px;
                                            }
                                            > .img-txt {
                                                text-align: left;
                                                margin: 30px 0;
                                                > div {

                                                    /*padding: 0 0 0 30px;*/
                                                    color: #000;
                                                    > h4 {
                                                        font-size: 15px;
                                                        line-height: 30px;
                                                        margin: 0 0 15px 0;
                                                        color: #444;
                                                    }
                                                    > p {
                                                        font-size: 15px;
                                                        line-height: 30px;
                                                        margin-bottom: 0px;
                                                        > i {
                                                            font-size: 18px;
                                                            color: #ff8650;
                                                        }
                                                    }
                                                }
                                                > .figure {
                                                    text-align: right;
                                                    > img {
                                                        width: 100%;
                                                    }
                                                }
                                                > div {
                                                    .title {
                                                        display: inline-block;
                                                        padding: 10px 15px;
                                                        border: 1px solid #ff8751;
                                                        font-size: 16px;
                                                        color: #ff8751;
                                                        text-align: center;
                                                    }
                                                }
                                            }
                                            /* 客户投保案例 */
                                            > #myTab {
                                                border-radius: 25px;
                                                border: 1px solid #ff8650;
                                                overflow: hidden;
                                                > li {
                                                    width: 20%;
                                                    border-right: 1px solid #ff8650;
                                                    > a {
                                                        font-size: 16px;
                                                        color: #000;
                                                        box-shadow: none;
                                                    }
                                                }
                                                > li.active,
                                                > li:hover {
                                                    background: #ff8650;
                                                    > a {
                                                        color: #fff;
                                                    }
                                                }
                                            }
                                            .tab-pane {
                                                > h4 {
                                                    font-size: 18px;
                                                    color: #ff8650;
                                                }
                                                > aside {
                                                    background: url(/static/img/US-insurance/Voya-img6-bg.jpg) no-repeat center center;
                                                    background-size: 100%;
                                                    margin: 18px 0 0 0;
                                                    padding: 14px 22px;
                                                    > h5 {
                                                        font-size: 16px;
                                                        color: #ff8650;
                                                        padding: 0 0 10px 0;
                                                        border-bottom: 1px solid #000;
                                                        margin: 0 0 10px 0;
                                                    }
                                                    > h4 {
                                                        font-size: 16px;
                                                        color: #ff8650;
                                                        margin: 10px 0;
                                                        text-align: left;
                                                    }
                                                    > p {
                                                        font-size: 15px;
                                                        color: #000;
                                                        text-align: left;
                                                        margin-bottom: 0px;
                                                        >.red-color{
                                                            color: #c10100;
                                                            font-weight: bold;
                                                        }
                                                    }
                                                }
                                            }
                                            /* 保单理赔 */
                                            > aside.Insurance-claims {
                                                text-align: center;
                                                > h4 {
                                                    font-size: 15px;
                                                    color: #000;
                                                    background: #e5e5e5;
                                                    padding: 10px 0;
                                                }
                                                > p {
                                                    color: #f85148;
                                                    margin: 34px 0 0 0;
                                                }
                                                > p:last-of-type {
                                                    margin: 50px 0 0 0;
                                                }
                                                > .process {
                                                    margin: 20px 0 0 0;
                                                    > p {
                                                        width: 33.3%;
                                                        float: left;
                                                        height: 112px;
                                                        padding: 0 60px;
                                                        display: flex;
                                                        flex-direction: column; /* 灵活的项目将垂直显示 */
                                                        justify-content: center; /* 弹性盒子元素在横向上的对齐方式 */
                                                    }
                                                    > p:first-of-type {
                                                        background: url(/static/img/US-insurance/Insurance-claims-bg1.png) no-repeat center center;
                                                        background-size: 100% 100%;
                                                    }
                                                    > p:nth-of-type(2) {
                                                        background: url(/static/img/US-insurance/Insurance-claims-bg2.png) no-repeat center center;
                                                        background-size: 100% 100%;
                                                    }
                                                    > p:last-of-type {
                                                        background: url(/static/img/US-insurance/Insurance-claims-bg3.png) no-repeat center center;
                                                        background-size: 100% 100%;
                                                    }
                                                }
                                            }
                                        }

                                        /* AIG 最大累积+指数型万能寿险 */
                                        > #AIG-Life-insurance {
                                            margin: 36px 0;
                                            > h4 {
                                                background: linear-gradient(to bottom, #039ed6, #057fab);
                                                background: -webkit-linear-gradient(to bottom, #039ed6, #057fab);
                                            }
                                            > .img-txt {
                                                > div {
                                                    > p {
                                                        > i {
                                                            color: #00b0f0;
                                                        }
                                                    }
                                                    > div.title {
                                                        border: 1px solid #00b0f0;
                                                        color: #00b0f0;
                                                    }
                                                }

                                            }
                                        }
                                    }
                                    >.Product-selection-main-content-NotLoggedIn {
                                        height: 500px;
                                        overflow: hidden;
                                    }
                                }
                            }
                        }
                        /*右边购买保险意向*/
                        >.right-box{
                            >.inside{
                                background: #fff;
                                padding: 15px;
                                text-align: left;
                                >h3{
                                    font-size: 18px;
                                    color: #000;
                                    height: 40px;
                                    border-bottom: 1px solid #dfdfdf;
                                    line-height: 40px;
                                    margin: 0 0 20px 0;
                                    >span{
                                        display: inline-block;
                                        height: 42px;
                                        border-bottom: 4px solid #1372b1;
                                        line-height: 42px;
                                    }
                                    >a{
                                        float: right;
                                        font-size: 14px;
                                    }
                                }

                            }
                        }
                    }
                }
            }
            //自定义tabs切换的样式
            .card-container {
                 .ant-tabs-bar {
                    border-bottom: none;
                    .ant-tabs-tab {
                        border:1px solid #ff8650;
                        border-left: none;
                        border-radius: 0px;
                        background: none;
                        padding: 0 16px;
                        .ant-tabs-nav-container {
                            height: auto;
                        }
                    }
                    .ant-tabs-tab:hover{
                        color: #fff;
                        background: #ff8650;
                    }
                    .ant-tabs-tab:active{
                        color: rgba(0, 0, 0, 0.65);
                    }
                    .ant-tabs-tab:first-of-type{
                        border-top-left-radius: 25px;
                        border-bottom-left-radius: 25px;
                    }
                    .ant-tabs-tab:last-of-type{
                        border-top-right-radius: 25px;
                        border-bottom-right-radius: 25px;
                    }
                    .ant-tabs-tab-active{
                        color: #fff;
                        background: #ff8650;
                    }
                }
            }
        }
    }
</style>
